<!DOCTYPE html>
<html>

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<meta name="viewport" content="initial-scale=1.0, user-scalable=no" />
	　<script src="http://libs.baidu.com/jquery/2.1.4/jquery.min.js"></script>
	<script type="text/javascript" src="http://api.map.baidu.com/api?v=2.0&ak=qg9PHYboQU1S8n22m2FS5ajknGmiUDQg"></script>
	<title>地图展示</title>
	<style type="text/css">
		body,
		html,
		#allmap {
			width: 100%;
			height: 100%;
			overflow: hidden;
			margin: 0;
			font-family: "微软雅黑";
		}

	</style>
</head>

<body>
<div>
	起始地址：<input type="text" id="startId" size="20" style="width:150px;" /> 目标地址：
	<input type="text" id="endId" size="20" style="width:150px;" />
	<button id="routeBtn">线路规划</button>
</div>
<div id="allmap"></div>

</body>
<script type="text/javascript">

	new BMap.Autocomplete({"input" : "startId"});
	new BMap.Autocomplete({"input" : "endId"});


	// 创建地址解析器实例
	var myGeo = new BMap.Geocoder();

	var startPoint;
	var endPoint;
	// 获得起始坐标
	$('#startId').blur(function() {
		// 将地址解析横、纵 坐标
		myGeo.getPoint($(this).val(), function(point) {
			if(point) {
				startPoint = point;
				console.log("startPoint：" + startPoint);
			} else {
				alert("您选择地址没有解析到结果!");
			}
		}, "中国");

	});

	// 获得结束坐标
	$('#endId').blur(function() {

		myGeo.getPoint($(this).val(), function(point) {
			if(point) {
				endPoint = point;
				console.log("endPoint：" + endPoint);
			} else {
				alert("您选择地址没有解析到结果!");
			}
		}, "中国");
	});
</script>

<script>
	// 百度地图API功能
	var map = new BMap.Map("allmap");
	var point = new BMap.Point(116.331398,39.897445);
	map.centerAndZoom(point,12);

	map.addControl(new BMap.NavigationControl());
	map.addControl(new BMap.ScaleControl());
	map.addControl(new BMap.OverviewMapControl());
	map.addControl(new BMap.MapTypeControl());




	function myFun(result){
		var cityName = result.name;
		map.setCenter(cityName);
		alert("当前定位城市:"+cityName);
	}
	var myCity = new BMap.LocalCity();
	myCity.get(myFun);

	$('#routeBtn').click(function() {
		var myIcon = new BMap.Icon("http://lbsyun.baidu.com/jsdemo/img/Mario.png", new BMap.Size(32, 70), { //小车图片
			//offset: new BMap.Size(0, -5),    //相当于CSS精灵
			imageOffset: new BMap.Size(0, 0) //图片的偏移量。为了是图片底部中心对准坐标点。
		});
		var driving2 = new BMap.DrivingRoute(map, {
			renderOptions: {
				map: map,
				autoViewport: true
			}
		}); //驾车实例
		driving2.search(startPoint, endPoint); //显示一条公交线路

		window.run = function (){
			var driving = new BMap.DrivingRoute(map);    //驾车实例
			driving.search(startPoint, endPoint);
			driving.setSearchCompleteCallback(function(){
				var pts = driving.getResults().getPlan(0).getRoute(0).getPath();    //通过驾车实例，获得一系列点的数组
				var paths = pts.length;    //获得有几个点

				var carMk = new BMap.Marker(pts[0],{icon:myIcon});
				map.addOverlay(carMk);
				i=0;
				function resetMkPoint(i){
					carMk.setPosition(pts[i]);
					if(i < paths){
						setTimeout(function(){
							i++;
							resetMkPoint(i);
						},100);
					}
				}
				setTimeout(function(){
					resetMkPoint(5);
				},100)

			});
		}
		setTimeout(function() {
			run();
		}, 1500);
	})

</script>





</html>